<template>
  <div class="app-container">

    <div
        style="width: 100vw;display: flex;justify-content: center;margin-top: 20px;padding: 20px;border-radius: 20px;margin-top: 20px">
      <!--    <div style="background-color: #409eff;width: 100%;display: flex;"></div>-->


      <div style="width: 60vw;position: relative;">
        <el-card v-if="museumdata.pic">

          <div style="display: flex">
            <div style="width: 24vw">
              <div style="width:100%;height: 400px"> <!--pic-box:width:500px;height:500px-->
                <pic-zoom :url="url" :scale="2" scroll="true" style="width:100%;height: 100%">

                </pic-zoom>
              </div>
              <div style="width: 100%;display: flex">
                <div v-for="(item,index) in museumdata.pic.split(',')" :key="item" class="card-item">
                  <el-image
                      style="width: 4vw; height: 4vw;margin-right: 1vw;margin-top: 20px"
                      :src="item"
                      @mouseenter.native="handleMouseEnter(item)"
                  >
                  </el-image>
                </div>
              </div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;font-size: 20px;position: relative;width: 36vw">
              <div style="text-align: left; font-weight: bolder">
                <span style="font-size: 30px">{{ museumdata.name }}</span>
              </div>


              <div style="text-align: right" v-if="userInfo">
                <svg v-if="museumdata.collection.indexOf('-'+userInfo.id+'-')>-1" @click="shoucang"
                     style="cursor: pointer;width: 30px;height: 30px;position: absolute;top: 0; right: 60px"
                     t="1729481062976" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2879" width="200" height="200">
                  <path
                      d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
                      fill="#f4ea2a" p-id="2880"></path>
                </svg>
                <svg v-else @click="shoucang"
                     style="cursor: pointer;width: 30px;height: 30px;position: absolute;top: 0; right: 60px"
                     t="1729481062976" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2879" width="200" height="200">
                  <path
                      d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
                      fill="#8a8a8a" p-id="2880"></path>
                </svg>
              </div>
              <div style="background-color: #f3f3f3;padding: 20px;border-radius: 20px;margin-top: 20px">


                <div style="text-align: left; margin-top: 10px;font-size: 15px">
                  价格：<span style="color: red;font-size: 20px">￥{{ museumdata.price }}</span>
                </div>
                <div style="text-align: left; margin-top: 10px;font-size: 15px">
                  可预约人数：<span>{{ museumdata.num }}</span>
                </div>
              </div>
              <div style="text-align: left; margin-top: 10px;font-size: 15px;overflow-y: auto;">
                开馆时间：<span>{{ museumdata.openTime }}</span>
              </div>
              <div style="text-align: left; margin-top: 10px;font-size: 15px;overflow-y: auto;">
                闭馆时间：<span>{{ museumdata.closeTime }}</span>
              </div>

              <div style="text-align: left; margin-top: 10px;font-size: 15px;overflow-y: auto;">
                已有<span>{{ museumdata.bookingCount }}人预约</span>
              </div>


              <div style="position: absolute;bottom: 0; right: 20px">
                <el-button type="danger" @click="getAddress">查看地理位置</el-button>
                <el-button type="danger" @click="addBooking">预约</el-button>
              </div>


            </div>
          </div>
          <div style="font-size: 20px;margin-top:30px;font-family: '宋体';">
            详情：
          </div>
          <div style="text-align: left; margin-top: 10px;font-size: 15px;overflow-y: auto;height: 15vh">
            <span>{{ museumdata.content }}</span>
          </div>

        </el-card>
        <div style="background-color: white;padding: 20px;border-radius: 20px;margin-top: 20px">
          <comments ifre="true" :id="museumid" table="goods" type="体验馆"></comments>
        </div>
      </div>

      <el-dialog title="选择预约时间段" :visible.sync="open" width="50%" append-to-body>
        <el-form ref="form" :model="bookData" label-width="90px">

          <el-form-item label="开放的预约时间段起始" prop="userAccount">
            <el-input v-model="museumdata.startTime" disabled/>
          </el-form-item>

          <el-form-item label="开放的预约时间段结束" prop="userAccount">
            <el-input v-model="museumdata.endTime" disabled/>
          </el-form-item>

          <el-form-item label="预约时间">

            <el-date-picker
                v-model="time"
                align="right"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
                :picker-options="pickerOptions">
            </el-date-picker>

          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open=false">取 消</el-button>
        </div>
      </el-dialog>


    </div>


  </div>
</template>

<script>
// import {listGoods, getGoods, delGoods, addGoods, updateGoods} from "@/api/project/goods";
import {getMuseum, updateMuseum} from "@/api/project/museum";

import {listCart, getCart, delCart, addCart, updateCart, ifhave} from "@/api/project/cart";
import {addBooking} from "@/api/project/booking";

export default {
  name: "index",

  watch: {
    time(a, b) {

      if (!(a >= this.museumdata.startTime && a <= this.museumdata.endTime)) {
        this.time = ''
        this.$message.error('不在预约时间段内')
      }
    }
  },
  data() {
    return {
      title: "",
      museumid: "",
      url: "",
      time: '',
      museumdata: {},
      bookData: {},
      open: false,
      form: {},
      userInfo: {},
      pickerOptions: {}
    }
  },

  created() {
    this.museumid = this.$route.query.id
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    this.chushihua()
  },
  methods: {
    shoucang() {
      let userid = "-" + JSON.parse(localStorage.getItem("userInfo")).id + "-"
      if (this.museumdata.collection.indexOf(userid) > -1) {
        this.museumdata.collection = this.museumdata.collection.replace(userid, "")
        updateMuseum(this.museumdata).then(res => {
          this.$message.success("取消收藏成功！");
          this.chushihua()
        })
      } else {
        this.museumdata.collection += userid
        updateMuseum(this.museumdata).then(res => {
          this.$message.success("收藏成功！");
          this.chushihua()

        })
      }

    },

    getAddress() {

      this.$router.push({ path: '/getAddress', query: {
        myLon:this.museumdata.coordinate.split(',')[1],myLat:this.museumdata.coordinate.split(',')[0],id:this.museumdata.id } });
    },
    submitForm() {
      if (!this.time) {
        this.$message.error('请选择预约时间段')
      } else {

        let data = {
          userId: this.userInfo.id,
          bookingTime: this.time,
          goodsId: this.museumdata.id,
          type:'体验馆',
          status:'待使用'
        }
        addBooking(data).then(res => {
          this.museumdata.num -= 1
          this.museumdata.bookingCount+=1
          updateMuseum(this.museumdata).then(res => {
            this.$message.success('预约成功')
            this.open = false
          })


        })


      }


    },
    addBooking() {
      if (!JSON.parse(localStorage.getItem("userInfo"))) {
        this.$message.error('请先登录')
        this.$router.push('/login')
      } else {
        this.open = true
      }

    },
    handleMouseEnter(item) {
      this.url = item
    },


    chushihua() {
      getMuseum({id: this.museumid}).then(res => {
        this.museumdata = res.data
        this.url = res.data.pic.split(",")[0]

      })
    },

  }
}
</script>

<style scoped>
.app-container {
  background-image: url('../../assets/back.jpg');
  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  min-height: 100vh;
  display: flex;

}
</style>
